<template>
	<view class="page">
			<view class="bg"> </view>
			<view class="" style="padding: 20rpx;position: relative;z-index: 2;">
				<view class="owner" >
					<view class="img" >
						<image :src="info.avatar" mode="aspectFit"></image>
						 
					</view>
					<view class="txt">
						<view class="name">
							<text style="max-width: 240rpx;">{{info.name || "小程序用户"}}</text>
							<!-- 未收藏 -->
							<image v-if="info.isCollect==0" @click.stop="handleCollect('create',item,index)"
							src="@/static/home/homelist/sc02.png" mode="widthFix"></image>
							<!-- 收藏 -->
							<image v-else @click.stop="handleCollect('delete',item,index)"
							src="@/static/home/homelist/sc01.png" mode="widthFix"></image>
							 
							 
						</view>
						<view class="tip" v-if="info.workTags">
							<text class="text" v-for="it in info.workTags.split(',')" :key="it">
								{{it}}
							</text> 
						</view>
						<view class="tip">
							<text class="text2">入驻{{info.yearsAgo}}年｜总接单 {{info.orderNum}}｜粉丝 {{info.fansNum}} </text>
							 
						</view>
						<view class="tip">
							<image v-if="info.trainingCertification==1" src="@/static/home/homelist/pxrz.png" mode="widthFix"></image>
							<image v-if="info.trainingCertification==0" src="@/static/home/homelist/zdgj.png" mode="widthFix"></image>
						</view>
						<view v-if="info.isCoupon==1" class="yhj" @click="tourl('/pages/appointment/getCoupon?type=1&id='+merchantId)">
							<image src="@/static/home/homelist/yhj.png" mode="widthFix"></image>
							<text>现在下单有优惠券可用哦！</text>
							<image src="@/static/appointment/moreright.png" mode="widthFix"></image>
						</view>
					</view>
				
					<view class="appointment">
						<view class="time">
							<view class="t1">营业时间 </view>
							<view class="t2">{{info.startTime }}</view>
						</view>
						 
					</view>
				</view> 
				
			</view>
			
			
			
			<view class="user" >
				<view class="tabbox">
					<view v-for="(item, i) in toplist" :key="i" class="tab" @click="topChange(item.id)">
						<view :class="topSign==item.id ? 'active' : ''">
							{{item.name}}
						</view>
						<view :class="topSign==item.id ? 'underline' : ''"></view>
					</view>
				</view>	
			 
				<homeList ref="homeList"  />
			</view>
			
		</view>
</template>

<script>
	import {mapState,mapActions } from "vuex";
	import homeList from "@/components/home-list.vue"
	import {materialUserDetailsAPI,materialCategoryUserAPI,materialCollectCreateAPI,
	materialCollectDeleteAPI,merchantscdelAPI ,merchantscAPI} from "@/api/appointment.js"
	import pageing from "@/mixins/pageing.js"
	 
	export default {
		mixins:[pageing],
		components:{homeList},
		data() {
			return {
				 
				merchantId:'',
				info:{},
				list:[],
				toplist: [{
					id: '保洁',
					name: "保洁"
				}, {
					id: '工程',
					name: "工程"
				}, {
					id: '陪护',
					name: "陪护"
				}],
				topSign:'保洁',
			}
		},
		computed:{
		    ...mapState("select", ["location","city"])
		},
		onLoad(option) {
			this.merchantId = option.id
			this.getdata()
			this.getlist()
		},
		methods: {
			
			topChange(n) {
				this.topSign = n
				this.page=1
				this.list=[]
				this.$refs.homeList.list=[]
				this.getlist()
				 
			},
			getdata() {
				var data = {
					merchantId: this.merchantId, 
				}
			
				materialUserDetailsAPI(data).then(res => {
					this.info = res.data
					// this.personImg=res.photos.split(",")
					// this.serveList=res.list
					 
					 
				})
			
			},
			handleCollect(url,item,index){
				// let action=url=="delete"?materialCollectDeleteAPI:materialCollectCreateAPI
				let action=url=='create'? merchantscAPI :merchantscdelAPI
				action({
					merchantId:this.merchantId
				}).then(res=>{
					this.$set(this.info,'isCollect',url=='create'? '1':'0')
					 
				})
			},
			getlist(){
				console.log('city',this.city)
				uni.showToast({
					mask:true
				})
				uni.showLoading({
					title:"加载中...",
					mask:true
				})
				materialCategoryUserAPI({
					pageNo: this.pageNo,
					pageSize: this.pageSize,
					cityId:this.city.cityId,
					longitude:this.location.longitude,
					latitude:this.location.latitude,
					merchantId:this.merchantId,
					name:this.topSign 
				}).then(res=>{
					this.total=res.total
					this.list=this.list.concat(res.data)
					this.$refs.homeList.list=this.list
					uni.hideLoading()
				}) 
			}
		}
	}
</script>

<style lang="scss" scoped>
.page{
	background-color: #F8F8F8;
}
.bg {
	width: 100%;
	height: 240rpx;
	background: #277EEF;
	border-radius: 0rpx 0rpx 40rpx 40rpx;
	position: absolute;
	top: 0;
	left: 0;
}	
.owner{
		display: flex;
		background-color: #fff;  
		border-radius:20rpx;
		padding: 20rpx;
		margin-bottom: 20rpx;
		.img{
			width: 220rpx;
			height: 280rpx;
			overflow: hidden;
			border-radius: 20rpx;
			margin-right: 20rpx; 
			background-color: #f1f1f1;
			image{
				border-radius: 20rpx;
				width: 220rpx;
				height: 280rpx;
			}
		}
		.txt{
			padding: 10rpx 2rpx;
			flex: 1;
			.name{
				font-weight: bold;
				display: flex;
				font-size: 32rpx;
				color: #333333;
				align-items: center;
				image{
					width: 40rpx;
					height: 40rpx;
					margin: 0 15rpx;
				} 
			}					 
			.tip{
				display: flex;
				align-items: center; 
				flex-wrap: wrap;
				margin-top: 20rpx;
				.text{
					padding: 8rpx 12rpx; 
					background: #F5F5F5;
					border-radius:4rpx;
					margin: 5rpx 10rpx 5rpx 0;
					font-size: 20rpx;
					color: #999999;
					line-height: 23rpx;
				}
				.text2{
					font-weight: 400;
					font-size: 20rpx;
					color: #666666;
					line-height: 23rpx;
					text-align: left;
					font-style: normal;
					text-transform: none;
				}
				image{
					width: 128rpx;
					height: 40rpx;
					margin-right: 20rpx;
				}
			}
			.yhj {
				display: flex;
				align-items: center;
				margin-top: 20rpx;
				justify-content: space-between;
			
				image {
					width: 40rpx;
					height: 40rpx;
				}
			
				text {
					font-size: 24rpx;
					color: #666666;
				}
			}
		
		}
		
		.appointment{
			width: 110rpx;
			position: absolute;
			top: 50rpx;
			right: 50rpx;
			.time{
				
				height: 88rpx;
				border-radius: 12rpx;
				text-align: center;
				 width: 110rpx;
				 box-sizing: border-box;
				 display: flex;
				 flex-direction: column;
				 align-items: center;
				 justify-content: center;
				.t1{
					width: 100%;
					font-size: 20rpx;
					color: #FFFFFF;
					line-height: 43rpx;
					text-align: center; 
					background: #277EEF;
					border-radius: 12rpx 12rpx 0rpx 0rpx;
					border: 1rpx solid #277EEF;
					margin:0 ;
					padding: 0;
				}
				.t2{
					width: 100%;
					font-weight: bold;
					font-size: 20rpx;
					color: #277EEF;
					line-height: 43rpx;
					text-align: center;
					font-style: normal;
					text-transform: none;
					border-radius:0rpx 0rpx 12rpx 12rpx ;
					border: 1rpx solid #277EEF;
				}
			}
			.address{
				font-weight: 500;
				font-size: 24rpx;
				color: #333333;
				margin-top: 20rpx;
				text-align: center;
				 
			}
		}
	
	}
	.user{
		padding: 20rpx;
		border-radius: 20rpx 20rpx 0rpx 0rpx;
		min-height: calc(100vh - 390rpx);
	}
	.tabbox {
			background: linear-gradient( 180deg, #FFFFFF 0%, #F8F8F8 100%); 
			display: flex;
			justify-content: space-around;
			align-items: center;
			padding: 0 30rpx;
			background-color: #fff;
			z-index: 99;
			// height: 100rpx;
			// border-bottom: 1px solid #eef0f4;
			width: 100%;

			.tab {
				padding: 20rpx;
				position: relative;

				line-height: 40rpx;
				color: #666;
				text-align: center;

			}

			.active {
				font-weight: bold;
				color: #333;
				font-size: 32rpx;

			}

			.underline {
				position: absolute;
				bottom: 0;
				left: 30%;
				width: 40%;
				height: 6rpx;
				background: $uni-color-primary;
				border-radius: 1px;
			}

		}
		
</style>
